<template>
  <div>
    <!-- 搜索框 -->
    <div class="search_item">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select
            v-model="value"
            clearable
            placeholder="请选择"
            @change="handleValue"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option></el-select
        ></el-col>
        <el-col :span="5">
          <el-input placeholder="请输入内容" v-model="input_name" clearable>
          </el-input
        ></el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" @click="find()"
            >搜索</el-button
          >
        </el-col>
        <!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>  -->
      </el-row>
    </div>
    <!-- 商品主体 -->
    <div class="image_div">
      <div class="image_show" v-for="item in tableData" :key="item.goodid">
        <div style="width: 200px; height: 250px">
          <el-image
            style="width: 200px; height: 200px"
            :src="item.img"
          ></el-image>
          <span class="demonstration">￥ {{ item.price }}</span>
          &nbsp;&nbsp;
          <el-button size="small" round @click="buy_good(item)">购买</el-button
          >&nbsp;
          <el-button
            @click="add_car(item)"
            size="small"
            circle
            icon="el-icon-shopping-cart-1"
          ></el-button>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="page_div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 微信支付二维码 -->
    <el-dialog
      title="付款"
      :visible.sync="code_dialog"
      width="30%"
      :before-close="handleClose"
      ><img width="250px" height="300px" src="images/money.JPG" alt="" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="code_dialog = false">确 定</el-button>
        <el-button @click="code_dialog = false">取 消</el-button>
      </span></el-dialog
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      code_dialog: false,
      total: 1,
      tableData: [],
      formLabelWidth: "80vw",
      input_name: "",
      page: 1,
      size: 4,
      options: [],
      value: "",
    };
  },
  methods: {
    find() {
      this.$axios
        .get("/api/gamemall-service/mall/findlist", {
          params: {
            page: this.page,
            size: this.size,
            goodName: this.input_name,
            type: this.value,
          },
        })
        .then((resp) => {
          console.log(resp.data.data);

          this.tableData = resp.data.data.list;
          this.total = resp.data.data.total;
        });
    },
    findGameTypeList() {
      this.$axios.get("/api/gamemall-service/mall/gametype").then((resp) => {
        console.log(resp.data.data);
        let dataArr = [];
        let typelist = resp.data.data;
        typelist.forEach((item) => {
          dataArr.push({
            label: item.parametername,
            value: item.parameterid,
          });
        });
        // 赋值
        this.options = dataArr;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.find();
    },
    buy_good(row) {
      this.code_dialog = true;
      console.log(row);
    },
    handleClose(done) {
      this.$confirm("确认关闭?")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleValue(val) {
      console.log(val);
    },
  },
  created() {
    this.find();
    this.findGameTypeList();
  },
};
</script>

<style>
.table_data {
  width: 100%;
  height: 100%;
}
.image_div {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.image_show {
  margin-top: 30px;
  margin-left: 80px;
}
.demonstration {
  height: 20px;
}
.page_div {
  width: 200px;
  height: 100px;
  position: fixed;
  bottom: 26px;
  left: 42%;
}
</style>